<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 标题 -->
    <title>添加功课</title>
    <!-- 关键词 -->
    <meta name="keywords" content="" />
    <!-- 网站简介 -->
    <meta name="description" content="" />
    <!-- 自适应屏幕 -->
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <!-- IE兼容 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 最新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- 消息提示框 CSS 文件 -->
    <link rel="stylesheet" href="css/toast.css" type="text/css">
    <!-- 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body >
    <div class="lessons-add">
        <!-- 顶部 -->
        <div class="top lessons-top">
            <h4>添加功课<a href=""><span class="iconfont">&#xe60e;</span></a></h4>  
        </div>

        <div class="lessons-contact">
            如果没有你想要的功课 请联系微信：909315
        </div>

        <div class="lessons-all">
            <div class="lessons-list clearfix">
                <div class="left">
                    <h4>观音心咒</h4>
                    <p><span>1万+</span>人主持</p>
                </div>
                <div class="right">
                    <div class="focus dn">
                        +
                    </div>
                    <div class="focus-add">
                        已添加
                    </div>
                </div>
            </div>
            <div class="lessons-list clearfix">
                <div class="left">
                    <h4>观音心咒</h4>
                    <p><span>1万+</span>人主持</p>
                </div>
                <div class="right">
                    <div class="focus">
                        +
                    </div>
                    <div class="focus-add dn">
                        已添加
                    </div>
                </div>
            </div>
            <div class="lessons-list clearfix">
                <div class="left">
                    <h4>观音心咒</h4>
                    <p><span>1万+</span>人主持</p>
                </div>
                <div class="right">
                    <div class="focus">
                        +
                    </div>
                    <div class="focus-add dn">
                        已添加
                    </div>
                </div>
            </div>
                       <div class="lessons-list clearfix">
                <div class="left">
                    <h4>观音心咒</h4>
                    <p><span>1万+</span>人主持</p>
                </div>
                <div class="right">
                    <div class="focus">
                        +
                    </div>
                    <div class="focus-add dn">
                        已添加
                    </div>
                </div>
            </div>
            <div class="lessons-list clearfix">
                <div class="left">
                    <h4>观音心咒</h4>
                    <p><span>1万+</span>人主持</p>
                </div>
                <div class="right">
                    <div class="focus">
                        +
                    </div>
                    <div class="focus-add dn">
                        已添加
                    </div>
                </div>
            </div>
                       <div class="lessons-list clearfix">
                <div class="left">
                    <h4>观音心咒</h4>
                    <p><span>1万+</span>人主持</p>
                </div>
                <div class="right">
                    <div class="focus">
                        +
                    </div>
                    <div class="focus-add dn">
                        已添加
                    </div>
                </div>
            </div>
            <div class="lessons-list clearfix">
                <div class="left">
                    <h4>观音心咒</h4>
                    <p><span>1万+</span>人主持</p>
                </div>
                <div class="right">
                    <div class="focus">
                        +
                    </div>
                    <div class="focus-add dn">
                        已添加
                    </div>
                </div>
            </div>
                       <div class="lessons-list clearfix">
                <div class="left">
                    <h4>观音心咒</h4>
                    <p><span>1万+</span>人主持</p>
                </div>
                <div class="right">
                    <div class="focus">
                        +
                    </div>
                    <div class="focus-add dn">
                        已添加
                    </div>
                </div>
            </div>
            <div class="lessons-list clearfix">
                <div class="left">
                    <h4>观音心咒</h4>
                    <p><span>1万+</span>人主持</p>
                </div>
                <div class="right">
                    <div class="focus">
                        +
                    </div>
                    <div class="focus-add dn">
                        已添加
                    </div>
                </div>
            </div>
                       <div class="lessons-list clearfix">
                <div class="left">
                    <h4>观音心咒</h4>
                    <p><span>1万+</span>人主持</p>
                </div>
                <div class="right">
                    <div class="focus">
                        +
                    </div>
                    <div class="focus-add dn">
                        已添加
                    </div>
                </div>
            </div>
            <div class="lessons-list clearfix">
                <div class="left">
                    <h4>观音心咒</h4>
                    <p><span>1万+</span>人主持</p>
                </div>
                <div class="right">
                    <div class="focus">
                        +
                    </div>
                    <div class="focus-add dn">
                        已添加
                    </div>
                </div>
            </div>
                       <div class="lessons-list clearfix">
                <div class="left">
                    <h4>观音心咒</h4>
                    <p><span>1万+</span>人主持</p>
                </div>
                <div class="right">
                    <div class="focus">
                        +
                    </div>
                    <div class="focus-add dn">
                        已添加
                    </div>
                </div>
            </div>
            <div class="lessons-list clearfix">
                <div class="left">
                    <h4>观音心咒</h4>
                    <p><span>1万+</span>人主持</p>
                </div>
                <div class="right">
                    <div class="focus">
                        +
                    </div>
                    <div class="focus-add dn">
                        已添加
                    </div>
                </div>
            </div>
                       <div class="lessons-list clearfix">
                <div class="left">
                    <h4>观音心咒</h4>
                    <p><span>1万+</span>人主持</p>
                </div>
                <div class="right">
                    <div class="focus">
                        +
                    </div>
                    <div class="focus-add dn">
                        已添加
                    </div>
                </div>
            </div>
            <div class="lessons-list clearfix">
                <div class="left">
                    <h4>观音心咒</h4>
                    <p><span>1万+</span>人主持</p>
                </div>
                <div class="right">
                    <div class="focus">
                        +
                    </div>
                    <div class="focus-add dn">
                        已添加
                    </div>
                </div>
            </div>
        </div>
        
        <!--添加自定义功课  -->
        <a href="" class="lesson-zdy">添加自定义功课</a>
    </div>
    
    <!-- jQuery文件 -->
    <script src="js/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <!-- 消息提示框 -->
    <script src="js/toast.js"></script>
    <script>
        $(".focus").click(function(){
            $(this).addClass("dn");
            $(this).parent().children(".focus-add").removeClass("dn");
        })
    </script>
    <script type="text/javascript">
        $('.focus').on('click', function ( e ) {
            $.toast({
            text: "添加成功", 
            showHideTransition: 'fade', //plain fade slide
            allowToastClose: false, 
            hideAfter: 1000, 
            stack: 1, 
            position: 'mid-center', 
            textAlign: 'center',  
            loader: true, 
            loaderBg: '#f4be40',  
            beforeShow: function () {}, 
            afterShown: function () {}, 
            beforeHide: function () {}, 
            afterHidden: function () {}  
            });
        });
    </script>
</body>
</html>
